<template>
<div class="app-container">
  <div class="">
    <div slot="header" class="clearfix job-tab-header">
    </div>
    <div>
      <el-form :rules="rules" ref="targetForm" :model="temp" label-width="100px" label-position='left' size="small">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="temp.name" style="width:63%" placeholder="角色名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色代码" prop="code">
            <el-input v-model="temp.code" style="width:63%" placeholder="角色代码" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="角色状态" prop="status">
            <el-select v-model="temp.status" clearable>
              <el-option v-for="item in  statusOptions" :key="item.key" :label="item.display_name" :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属子系统" prop="subsysid">
            <el-select v-model="temp.subsysid" clearable @focus="editSubSystemsOptions">
              <el-option v-for="item in subSystemsOptions" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="所属部门" prop="OrgId">
              <el-input v-model="belongOrgName" placeholder="所属部门" style="width:200px" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button size="small" type="primary" @click="handleCreate()">设置</el-button>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色描述" prop="description">
              <el-input type="textarea" v-model="temp.description" style="width:85%" placeholder="角色描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" style="border-top:1px solid #e6e6e6; padding-top:20px;">
          <el-col style="text-align: right;">
            <el-button size="small" class="filter-item" type="primary" @click="saveData">保 存</el-button>
            <el-button size="small" class="filter-item" type="primary" @click="closeSelf">关 闭</el-button>
          </el-col>
        </el-row>
       </el-form>
    </div>
  </div>
    <!--所属部门设置-->
    <el-dialog
      v-if="dialogVisiblebelongOrg"
      append-to-body
      top="0"
      :close-on-click-modal="false"
      title="设置所属部门"
      :visible.sync="dialogVisiblebelongOrg"
      width="70%">
      <belongOrg :belongOrgData="temp.OrgId" @changeOrgCloseDialog="changeOrgCloseDialog" @setOrg="changeOrg($event)"></belongOrg>
    </el-dialog>
</div>
</template>

<script>
import belongOrg from '@/views/systemManage/commonComponents/orgSetting/belongOrg'
import {
  insertItem,
  selectSysSubsys,
  selectExit
} from '@/api/systemManage/roleManagementEdit'
import {
  statusOptions,
  isInnerOption
} from '@/utils/allOptions'
export default {
  name: 'newRole',
  components: {
    belongOrg
  },
  data() {
    var checkCode = (rule, value, callback) => {
      const query = {
        condition:{
          code: {
            property: 'code',
            value: value,
            type: 'EQ'
          }
        }
      }
      selectExit(query).then(response => {
        const records = response.data.data.records
        setTimeout(() => {
          if (response.data.data.count > 0) {
            callback(new Error('角色代码已经存在，请重新输入'));
          } else {
            callback();
          }
        }, 1000);
      })
    }
    return {
      dialogVisiblebelongOrg: false,
      belongOrgData: [],
      belongOrgName: '',
      // -------Options-----------
      statusOptions,
      isInnerOption,
      // -------Options-----------
      subSystemsOptions: [],
      temp: {
        name: '',
        subsysid: '',
        validType: '',
        isInner: '',
        code: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入角色名称',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 100,
          message: '长度在 0 到 100 个字符',
          trigger: 'blur'
        },
        {
          max: 100,
          message: '最大 100 个字符',
          trigger: 'blur'
        }
        ],
        code: [{
          required: true,
          message: '请输入角色代码',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 100,
          message: '长度在 0 到 100 个字符',
          trigger: 'blur'
        },
        {
          max: 100,
          message: '最大 100 个字符',
          trigger: 'blur'
        },
        {
          validator: checkCode,
          trigger: 'blur'
        }
        ],
        status: [{
          required: true,
          message: '请选择是否有效',
          trigger: 'blur'
        }],
        isInner: [{
          required: true,
          message: '请选择是否内置角色',
          trigger: 'blur'
        }],
        subsysid:[{
        message: '所属子系统不能为空',
        required: true,
        trigger: 'change'
        }]
      }
    }
  },
  methods: {
    editSubSystemsOptions() {
      const query = {
        sort: [{
          direction: 'ASC',
          property: 'id'
        }]
      }
      selectSysSubsys(query).then(response => {
        const records = response.data.data.records
        if (response.data.data.count > 0) {
          this.subSystemsOptions = []
          for (const item of records) {
            const input = {}
            input.id = item.id
            input.name = item.name
            this.subSystemsOptions.push(input)
          }
        }
      })
    },
    saveData() {
      this.$refs.targetForm.validate(valid => {
        if (valid) {
          insertItem(this.temp).then(() => {
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
            this.$emit('changeCloseDialog')
          })
        }
      })
    },
    closeSelf() {
      this.$emit('changeCloseDialog')
    },
    handleCreate() {
      this.dialogVisiblebelongOrg = true
    },
    changeOrgCloseDialog() {
      this.dialogVisiblebelongOrg = false
    },
    changeOrg(data) {
      this.belongOrgData = data
      this.temp.orgId = data.orgId
      this.belongOrgName = data.orgName
    }
  }
}
</script>

